<script setup>
	import { ref } from 'vue'
 import { login } from '@/apis/user'
 import { useUserStore } from '@/stores'
	//定义表单数据
	const formData= ref({
		account:'',
		password:''
	})
	
	//定义表单校验规则
	const rules={
		  account: {
		      rules: [
		        { required: true, errorMessage: '请输入登录账号' },
		        { pattern: '^[a-zA-Z0-9]{6,8}$', errorMessage: '登录账号格式不正确' },
		      ],
		    },
		    password: {
		      rules: [
		        { required: true, errorMessage: '请输入登录密码' },
		        { pattern: '^\\d{6}$', errorMessage: '登录密码格式不正确' },
		      ],
		    }
	}
	
	const form=ref(null)
	const store=useUserStore()
   //登录
	 const onLogin=async()=>{
		try{
			//校验表单
			await form.value.validate()
			 const res=await login(formData.value)
			 //保存token到仓库
			 store.setStore(res.data)
			 uni.showToast({
			 	icon:'success',
				title:'登录成功'
			 })
			 //跳转页面
			 uni[store.openType]({
				 url:store.redirectURL
			 })
		}catch(e){
			console.log(e)
		}
	 }
</script>

<template>
	<uni-forms class="login-form" ref="form" :rules="rules" :model="formData">
		<uni-forms-item name="account">
			<input
				type="text"
				placeholder="请输入账号"
				class="uni-input-input"
				placeholder-style="color: #818181"
				v-model="formData.account"
			/>
		</uni-forms-item>
		<uni-forms-item name="password">
			<input
				type="text"
				placeholder="请输入密码"
				class="uni-input-input"
				placeholder-style="color: #818181"
				v-model="formData.password"
			/>
		</uni-forms-item>
		<button class="submit-button" @click="onLogin">登录</button>
	</uni-forms>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>
